{{extend "base.html"}}

{{block head}}

    <script>
	
		var datagrid;
		$(function(){
			datagrid=$('#data').datagrid({
				url: '/idcpost/ippool',
				iconCls:'icon-tip',
				width:'auto',
				height:'auto',
				title: '',
				nowrap: true,
				autoRowHeight: false,
				striped: true,
				collapsible:true,
				idField:'id',
				pagination:true,  //分页
				//rownumbers:true, //显示行号
				pageSize:20,
				pageList:[20,30],
				//loadMsg:'正在载入数据...',
				//自适应高度
				fit:true,
				//自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
				fitColumns: true,
				frozenColumns : [ [ {
					title : '编号',
					field : 'id',
					width : 150,
					sortable : true,
					checkbox : true
				}, {
					title : '机房名称',
					field : 'computerroom_id',
					width : 150,
					sortable : true
				} ] ],
				columns:[[
					{field:'ippool_prefix',title:'IP池',width:100,sortable:true},
					{field:'ippool_netmask',title:'子网掩码',width:100},
					{field:'ippool_gateway',title:'网关',width:100},
					{field:'ippool_len',title:'数量',width:100},
					{field:'ip_not_used',title:'未使用IP数量',width:100},
					{field:'comment',title:'备注',width:100
					
				}, {
					title : '操作',
					field : 'content',
					width : 150,
					formatter : function(value, rowData, rowIndex) {
						return '<span class="icon-search" style="display:inline-block;vertical-align:middle;width:16px;height:16px;"></span><a href="javascript:void(0);" onclick="showcontent(' + rowIndex + ');">查看详细</a>';
					}
				}]],
				toolbar:'#toolbar',
			}); 
			
			$('#cr_name').combobox({
				url : '/idcpost/computerroominfo',
				valueField : 'id',
				textField : 'cr_name',
				//required : true,
				panelHeight : 'auto',
				editable:false,
				//mode : 'remote',
				//delay : 500
			});

		});
		
    function edit() {
		var rows = datagrid.datagrid('getSelections');
		if (rows.length == 1) {
			var p = parent.sy.dialog({
				title : '编辑',
				href : '/idc/ippooledit?id=' + rows[0].id,
				width : 450,
				height : 250,
				buttons : [ {
					text : '编辑',
					handler : function() {
						var f = p.find('form');
						f.form('submit', {
							url : '/idc/ippoolsave',
							success : function(d) {
								var json = $.parseJSON(d);
								if (json.success) {
									datagrid.datagrid('reload');
									p.dialog('close');
								}
								parent.sy.messagerShow({
									msg : json.msg,
									title : '提示'
								});
							}
						});
					}
				} ],
				onLoad : function() {
					var f = p.find('form');
					f.form('load', {
						id : rows[0].id,
						ippool_prefix : rows[0].ippool_prefix,
						ippool_gateway : rows[0].ippool_gateway,
						comment : rows[0].comment,
					});
				}
			});
		} else if (rows.length > 1) {
			parent.sy.messagerAlert('提示', '同一时间只能编辑一条记录！', 'error');
		} else {
			parent.sy.messagerAlert('提示', '请选择要编辑的记录！', 'error');
		}
	}
	function append() {
		var p = parent.sy.dialog({
			title : '添加',
			href : '/idc/ippooladd',
			width : 450,
			height : 250,
			buttons : [ {
				text : '添加',
				handler : function() {
					var f = p.find('form');
					f.form('submit', {
						url : '/idc/ippoolsave',
						success : function(d) {
							var json = $.parseJSON(d);
							if (json.success) {
								datagrid.datagrid('reload');
								p.dialog('close');
							}
							parent.sy.messagerShow({
								msg : json.msg,
								title : '提示'
							});
						}
					});
				}
			} ]
		});
	}
	
	function del() {
		var rows = datagrid.datagrid('getChecked');
		var ids = [];
		if (rows.length > 0) {
			parent.sy.messagerConfirm('请确认', '您要删除当前所选项目？', function(r) {
				if (r) {
					for ( var i = 0; i < rows.length; i++) {
						ids.push(rows[i].id);
					}
					$.ajax({
						url : '/idc/ippooldel',
						data : {
							id : ids.join(',')
						},
						dataType : 'json',
						success : function(d) {
							datagrid.datagrid('load');
							datagrid.datagrid('unselectAll');
							parent.sy.messagerShow({
								title : '提示',
								msg : d.msg
							});
						}
					});
				}
			});
		} else {
			parent.sy.messagerAlert('提示', '请勾选要删除的记录！', 'error');
		}
	}
	
	function undo(){
			datagrid.datagrid('clearSelections');
			datagrid.datagrid('unselectAll');	
	}
	
		//查看明细
	function showcontent(rowIndex) {
		var rows = datagrid.datagrid('getRows');
		var row = rows[rowIndex];

		var p = parent.sy.dialog({
			title : '设备明细 [' + row.title + ']',
			modal : true,
			maximizable : true,
			width : 900,
			height : 500,
			content : '<iframe src="/idc/ippooldetail?id=' + row.id + '" frameborder="0" style="border:0;width:100%;height:99.4%;"></iframe>'
		});

		datagrid.datagrid('unselectAll');
	}
	
	</script>
{{end}}

{{block bodyclass}}
<body class="easyui-layout" data-options="fit:true,border:false">
{{end}}
{{block content}}

	<div id="toolbar" style="display: none;">
		<table>
			<tr>
				<td>
					<form id="searchForm">
						<table>
							<tr>
								<td>机房</td>
								<td><input name="cr_name" id="cr_name" style="width:200px" /></td>
								<td>IP池</td>
								<td><input name="ippool_prefix" style="width: 80px;" /></td>
								<td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom',plain:true" onClick="datagrid.datagrid('load',sy.serializeObject($('#searchForm')));">搜索</a><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom_out',plain:true" onClick="$('#searchForm input').val('');datagrid.datagrid('load',{});">清空</a></td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onClick="append();">添加</a></td>
							<td><div class="datagrid-btn-separator"></div></td>
							<td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onClick="del();">删除</a></td>
							<td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onClick="edit();">修改</a></td>
                            <td><a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onClick="undo();">取消选中</a></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div data-options="region:'center',fit:true,border:false">
		<table id="data" data-options="fit:true,border:false"></table>
	</div>

{{end}}
